<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>用户管理</title>
    <link rel="stylesheet" href="../../css/style.css">
    <link rel="stylesheet" href="../../css/user/list.css">
    <link rel="stylesheet" href="../../css/common.css">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
</head>
<body>
    <div id="app">
        <header>
            <h1>
                <i class="fas fa-users"></i>
                用户管理
            </h1>
            <div class="user-info">
                欢迎，{{ userInfo.userName }}
                <a href="javascript:void(0)" @click="handleLogout">
                    <i class="fas fa-sign-out-alt"></i>
                    退出
                </a>
            </div>
        </header>
        
        <nav>
            <ul>
                <li><a href="../../index.html">返回首页</a></li>
            </ul>
        </nav>

        <main>
             <!-- 统计卡片 -->
             <div class="stats-container">
                <div class="stat-card">
                    <div class="stat-icon"><i class="fas fa-users"></i></div>
                    <div class="stat-info">
                        <h3>总用户数</h3>
                        <p>{{ totalUsers }}</p>
                    </div>
                </div>
                <div class="stat-card">
                    <div class="stat-icon"><i class="fas fa-user-shield"></i></div>
                    <div class="stat-info">
                        <h3>管理员用户</h3>
                        <p>{{ adminUsers }}</p>
                    </div>
                </div>
                <div class="stat-card">
                    <div class="stat-icon"><i class="fas fa-user-tie"></i></div>
                    <div class="stat-info">
                        <h3>停车场管理员</h3>
                        <p>{{ parkingAdminUsers }}</p>
                    </div>
                </div>
                <div class="stat-card">
                    <div class="stat-icon"><i class="fas fa-user"></i></div>
                    <div class="stat-info">
                        <h3>普通用户</h3>
                        <p>{{ regularUsers }}</p>
                    </div>
                </div>
            </div>
            <div class="action-bar">
                <button class="btn btn-primary" @click="showAddForm">
                    <i class="fas fa-plus"></i> 添加用户
                </button>
                <div class="search-box">
                    <input type="text" v-model="searchKey" placeholder="搜索用户名...">
                    <button @click="handleSearch">
                        <i class="fas fa-search"></i> 搜索
                    </button>
                </div>
            </div>

            <table class="table">
                <thead>
                    <tr>
                        <th>用户ID</th>
                        <th>用户名</th>
                        <th>真实姓名</th>
                        <th>角色</th>
                        <th>电话</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="user in users" :key="user.userId">
                        <td>{{ user.userId }}</td>
                        <td>{{ user.userName }}</td>
                        <td>{{ user.realName }}</td>
                        <td>{{ getRoleName(user.roleId) }}</td>
                        <td>{{ user.userPhone }}</td>
                        <td>
                            <button class="btn btn-primary" @click="showEditForm(user)">
                                <i class="fas fa-edit"></i> 编辑
                            </button>
                            <button class="btn btn-danger" @click="deleteUser(user.userId)">
                                <i class="fas fa-trash"></i> 删除
                            </button>
                        </td>
                    </tr>
                </tbody>
            </table>

            <!-- 添加/编辑用户弹窗 -->
            <div class="modal" v-if="showModal">
                <div class="modal-content">
                    <h3>{{ isEdit ? '编辑用户' : '添加用户' }}</h3>
                    <form @submit.prevent="submitForm">
                        <div class="form-group">
                            <label for="userName">用户名：</label>
                            <input type="text" id="userName" v-model="form.userName" required>
                        </div>
                        <div class="form-group">
                            <label for="realName">真实姓名：</label>
                            <input type="text" id="realName" v-model="form.realName" required>
                        </div>
                        <div class="form-group" v-if="!isEdit">
                            <label for="password">密码：</label>
                            <input type="password" id="password" v-model="form.password" required>
                        </div>
                        <div class="form-group">
                            <label for="roleId">角色：</label>
                            <select id="roleId" v-model="form.roleId" required>
                                <option value="1">系统管理员</option>
                                <option value="2">停车场管理员</option>
                                <option value="3">普通用户</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label for="userPhone">电话：</label>
                            <input type="tel" id="userPhone" v-model="form.userPhone" required>
                        </div>
                        <div class="form-buttons">
                            <button type="submit" class="btn btn-primary">保存</button>
                            <button type="button" class="btn btn-danger" @click="closeModal">取消</button>
                        </div>
                    </form>
                </div>
            </div>
        </main>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <script src="../../js/user/list.js"></script>
</body>
</html> 